<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import ArchiveCard from './components/ArchiveCard.vue'
import { getArchiveList } from '@/services/home.ts'
import type { ArchiveItem, ArchiveParams } from '@/types/archive'
// 导入会员Store
import { useMemberStore } from '@/stores'
// 获取会员Store实例
const memberStore = useMemberStore()

// 成长档案列表
const archiveList = ref<ArchiveItem[]>([])
// 分页参数
const archivePage = ref<ArchiveParams>({ pageNum: 1, pageSize: 10 })
const hasMoreArchives = ref(true)
// 是否加载中标记
const isLoading = ref(false)

// 加载数据
const loadData = async () => {
  isLoading.value = true
  await getArchiveListData(archivePage.value) // 重置为第一页
  isLoading.value = false
}
// 获取成长档案列表
const getArchiveListData = async (pageParams: ArchiveParams) => {
  // 登录状态下，添加 studentId 参数
  if (memberStore.profile?.role === 'student') {
    pageParams.studentId = memberStore.profile?.userId
  }

  pageParams.studyStatus = 4
  // 如果是下拉刷新，清空现有数据
  if (pageParams.pageNum === 1) {
    archiveList.value = []
    hasMoreArchives.value = true
  }

  // 如果没有更多数据，直接返回
  if (!hasMoreArchives.value) {
    return
  }

  try {
    const res = await getArchiveList(pageParams)
    // 添加数据
    if (pageParams.pageNum === 1) {
      archiveList.value = res.data.rows
    } else {
      archiveList.value = [...archiveList.value, ...res.data.rows]
    }
    // 判断是否还有更多数据
    hasMoreArchives.value = res.data.rows.length === pageParams.pageSize
    // 更新页码
    archivePage.value.pageNum = pageParams.pageNum
  } catch (error) {
    console.error('获取消息列表失败:', error)
  }
}

// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
// 下拉刷新
const onRefresherrefresh = async () => {
  isTriggered.value = true
  // 根据当前标签刷新对应数据
  archivePage.value.pageNum = 1
  archivePage.value.pageSize = 10
  await getArchiveListData(archivePage.value)
  isTriggered.value = false
}
// 上拉加载更多
const handleLoadMore = () => {
  archivePage.value.pageNum = (archivePage.value.pageNum ?? 1) + 1
  getArchiveListData(archivePage.value)
}

// 页面加载时执行
onMounted(async () => {
  // 首次加载数据
  await loadData()
  // 添加事件监听
  uni.$on('refreshData', refreshData)
})

// 页面卸载时执行
onUnmounted(() => {
  // 移除事件监听
  uni.$off('refreshData', refreshData)
})

// 刷新数据
const refreshData = () => {
  loadData()
}

// 新增跳转到点评页面的方法
const navigateToCommentPage = () => {
  uni.navigateTo({
    url: '/pages/growthArchive/newComment',
  })
}
</script>

<template>
  <!-- 滚动容器 -->
  <scroll-view
    :enable-back-to-top="true"
    :refresher-enabled="true"
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="handleLoadMore"
    class="message-list"
    :scroll-y="true"
  >
    <ArchiveCard v-for="archive in archiveList" :key="archive.id" :archive="archive" />
    <!-- 空状态显示 -->
    <view class="empty-state" v-if="archiveList.length === 0 && !isLoading">
      <text class="empty-text">暂无相关数据</text>
    </view>
  </scroll-view>
  <!-- 老师专属的点评按钮 -->
  <view v-if="memberStore.profile?.role === 'teacher'" class="teacher-action-button">
    <button @click="navigateToCommentPage" class="add-button">+</button>
  </view>
</template>

<style lang="scss">
.scroll-view {
  flex: 1;
  overflow: hidden;
}

/* 新增空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  height: 400rpx;
  .empty-img {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 30rpx;
    opacity: 0.6;
  }
  .empty-text {
    font-size: 28rpx;
    color: $archive-text-auxiliary;
  }
}

/* 消息列表样式优化 */
.message-list {
  padding: 20rpx;
  height: calc(100vh - 88rpx); /* 计算可视高度 */
  background-color: $archive-bg-color;
}

/* 老师操作按钮样式优化 */
.teacher-action-button {
  position: fixed;
  bottom: 60rpx;
  right: 60rpx;
  z-index: 999;
}

.add-button {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: $archive-accent-color;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  padding: 0;
  line-height: 1;
  box-shadow: 0 4rpx 20rpx rgba(255, 125, 0, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 10rpx rgba(255, 125, 0, 0.2);
  }
}
</style>
